<template>
	<div>
		<div id="banner-container">
			<search-box></search-box>
		</div>
		<!--这里判断banners.length>0是要在banners加载数据后才显示轮播图-->
		<swiper id="banner-swiper" :options="bannerSwiper" v-if="banners.length>0">
			<swiper-slide  v-for="banner in banners" :key="banner.id">
				<div class="banner-slide" :style="banner.bannerImg" @click="clickBanner(banner.url)"></div>
			</swiper-slide>
			<!--分页控制器-->
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>

		<div class="nav-container">

			<div v-for="nav in navs" :key="nav.id" :class="nav.navClass" :style="nav.navBgColor" @click="clickNav(nav.id, nav.cid, nav.name)">
				<div v-if="nav.navClass=='nav-item-l'" class="nav-item-l-panel">
					<div class="item-title">{{nav.name}}</div>
					<div class="item-img" :style="nav.navImg">
						<img :src="nav.navImg"/>
					</div>
				</div>
				<div v-else>{{nav.name}}</div>
			</div>

		</div>
		
	</div>
</template>

<script>
import wx from 'weixin-js-sdk'
export default {
	name: 'index-page',
	data(){
		return {
			bannerSwiper: {
				pagination: {
                    el: '.swiper-pagination',
                    // 设置点击可切换
                    clickable: true
                },
                loop: true,
                autoplay: {
                	delay: 3000,
                }
			},

			banners: [],
			navs: [],
		}
	},

	mounted: function() {
		// window.onscroll = function(){}
		window.addEventListener('scroll',function(){})
		this.getBanners()
		this.getNavs()
		this.getSignPackage()
	},

	methods: {
		clickNav: function(navId, catId, catName) {
			this.$router.push({path: 'cat-page', query: {
				nav_id: navId,
				cat_id: catId,
				cat_name: catName
			}})
		},

		clickBanner: function(url) {
			// console.log("click banner..." + url)
			// window.location.href = url
			this.$router.push({path: url})
		},

		getBanners: function() {
			let that = this
			this.axios.get('/conf/banners')
				.then(response=>{
					// console.log(response)
					that.banners = response.data
				})
		},

		getNavs: function() {
			let that = this
			this.axios.get('/conf/navs')
				.then(response=>{
					// console.log(response.data)
					that.navs = response.data
				})
		},

		getSignPackage: function() {
			let currentUrl = window.location.href
			console.log(currentUrl)
			// let urlArr = currentUrl.split("#")
			let urlArr = currentUrl.split("#")
      		let url = encodeURIComponent(urlArr[0])
			// let url = encodeURIComponent(currentUrl)

			this.axios.get(`getAccess.php?url=${url}`)
				.then(res => {
					console.log(res)
					this.setWxConfig(res.data)
				})
				.catch(error => {
					console.log(error)
				})
		},

		setWxConfig: function(data) {
			wx.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: data.appId, // 必填，公众号的唯一标识
				timestamp: data.timestamp, // 必填，生成签名的时间戳
				nonceStr: data.nonceStr, // 必填，生成签名的随机串
				signature: data.signature,// 必填，签名
				jsApiList: [
					'onMenuShareTimeline',
					'onMenuShareAppMessage'
				] // 必填，需要使用的JS接口列表
			});
			wx.ready(function() {
				console.log('接口配置信息已经完成')
				wx.onMenuShareTimeline({
					title: "淘宝天猫优惠券",
					link: 'http://www.leil.club',
					imgUrl: 'http://neimengweixin.cdn.xianyugame.com/66game/youhuiquan.jpg',
					success: function() {
						console.log('用户点击按钮回调')
					}
				})

				wx.onMenuShareAppMessage({
					title: '淘宝天猫优惠券', // 分享标题
					desc: '百万淘宝天猫优惠券等你来领！', // 分享描述
					link: 'http://www.leil.club', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: 'http://neimengweixin.cdn.xianyugame.com/66game/youhuiquan.jpg', // 分享图标
					type: '', // 分享类型,music、video或link，不填默认为link
					dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
					success: function () {
						// 用户点击了分享后执行的回调函数
						console.log('用户点击了分享给朋友按钮')
					}
				})
			})
		},
	}
}
</script>